<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<!-- TODO 设计理解错误原型-》 缺少发布按钮 -->
				<view class="btns">
					<wd-button type="success" @click="goPage('/collaborative/release/release')"
						custom-class="wd-button-custom-class-my-success  square wd-button-custom-class-w100">
						<text class="iconfont icon-fabu"></text>
						去发布
					</wd-button>
					<wd-button type="success" @click="goPage('/collaborative/my-posts/my-posts')"
						custom-class="wd-button-custom-class-my-cancel-1 square wd-button-custom-class-w100">
						<text class="iconfont icon-sousuo"></text>
						我的发布
					</wd-button>
					<wd-button type="success" @click="goPage('/collaborative/my-order-taking/my-order-taking')"
						custom-class="wd-button-custom-class-my-cancel-1 square wd-button-custom-class-w100">
						<text class="iconfont icon-xietong"></text>
						我的接单
					</wd-button>
				</view>
				<!-- 	<view class="query-box">
					<wd-search :placeholder-left="true" placeholder="发布信息查询 " :light="true" :hide-cancel="true"
						v-model="formData.keyword" />
				</view> -->
				<view class="reception-square">
					<!-- 设计页面 无法完全展示内容 所以做出调整 -->
					<view class="box">
						<view class="title">接单广场</view>
						<view class="search" v-show="false">
							<view class="item">
								<wd-picker :columns="typeColumns" v-model="formData.type" use-default-slot>
									全部分类
									<text class="iconfont icon-jiantou-copy-copy"></text>
								</wd-picker>
							</view>
							<view class="item">
								<wd-sort-button :allow-reset="true" title="价格" v-model="formData.price" />
							</view>
							<view class="item">
								<wd-picker :columns="recommendColumns" v-model="formData.type" use-default-slot>
									推荐
									<text class="iconfont icon-jiantou-copy-copy"></text>
								</wd-picker>
							</view>

							<!-- #ifdef MP-WEIXIN  -->
							<picker mode="region">
								<view class="item">
									{{ formData.address }}
									<text class="iconfont icon-jiantou-copy-copy"></text>
								</view>
							</picker>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN  -->
							<view class="item" @click="openCityPicker">
								{{ formData.address }}
								<text class="iconfont icon-jiantou-copy-copy"></text>
							</view>
							<!-- #endif -->
						</view>
						<view class="content">
							<scroll-view v-if="!loading && dataList.length>0" scroll-y="true" class="scroll-Y"
								@scrolltolower="scrolltolower">
								<view class="item" v-for="(item, index) in dataList" @click="goOrderInfo(item)">
									<view class="col">
										<view class="number">{{ item.order_sn }}</view>
										<view class="type">{{ item.cate_name }}</view>
										<view class="date">{{ getDateDiff(item.create_time) }}</view>
									</view>
									<view class="col">
										<view class="addr">{{ item.address }}</view>
										<view class="user">
											<image :src="item.user_head" />
											<text>{{ item.user_name}}</text>
										</view>
										<view class="price">¥{{ item.money_total }}</view>
									</view>
								</view>
							</scroll-view>
							<wd-status-tip v-else image="content" tip="暂无内容" />
						</view>
					</view>
				</view>
				<!-- #ifndef MP-WEIXIN  -->
				<cityPicker :column="columnCount" :mask-close-able="false" @confirm="confirm" @cancel="cancel"
					:visible="cityVisible" />
				<!-- #endif -->
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, reactive, ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app"
	import { getCoopMarketOrderList } from "@/api/coop"
	import useRouter from '@/hooks/useRouter.ts';
	// #ifndef MP-WEIXIN
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	// #endif
	export default defineComponent({
		name: 'Query',
		components: {
			// #ifndef MP-WEIXIN
			cityPicker
			// #endif
		},
		setup(props, ctx) {
			const router = useRouter();

			// 日间light、夜间dark主题
			const theme = ref('light');
			const dataList = ref([]);
			const isMore = ref(false);
			const loading = ref(false); // 是否正在加载数据，用于防止重复加载数据。
			const formData = reactive({
				price: 0, // 查询关键字
				type: '',
				recommend: '',
				address: '',
				page: 1,
				pageSize: 10,
			});
			const typeColumns = ref([
				{ label: '内档查询（工商查询）', value: '内档查询（工商查询）' },
				{ label: '车辆查询', value: '车辆查询' },
				{ label: '婚姻查询', value: '婚姻查询' },
				{ label: '保险理财信息查询', value: '保险理财信息查询' },
				{ label: '房产查询', value: '房产查询' }
			]);
			const recommendColumns = ref([{ label: '内档查询（工商查询）', value: '内档查询（工商查询）' }]);
			const columnCount = ref(3);
			const cityVisible = ref(false); // 城市选择器是否可见的变量
			const openCityPicker = () => {
				cityVisible.value = true;
			};

			const confirm = (res : { cityName : string; provinceName : any; areaName : any }) => {
				formData.address = res.cityName !== '直辖市' ? res.provinceName + res.areaName : res.cityName + res.areaName;
				cityVisible.value = false; // 关闭弹框
			};
			const cancel = () => {
				cityVisible.value = false; // 关闭弹框
			};
			const goPage = (e : string) => {
				router.push({ url: e });
			};
			const getDateDiff = (temp) => {
				let timestamp = new Date(temp).getTime(); // 参数时间戳转换成秒数
				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}
				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();
				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			}
			const scrolltolower = () => {
				if (isMore.value) {
					return false;
				}
				formData.page += 1;
				getData();
			}
			const getData = () => {
				loading.value = true;
				getCoopMarketOrderList({
					...formData,
				}).then((res : any) => {
					let list = res.list || res;
					if (formData.pageSize > res.list.length) {
						isMore.value = false;
					} else {
						isMore.value = true;
					}
					if (formData.page === 1) {
						dataList.value = []; // 如果是第一页，清空数据列表。
						// 确保数据列表清空后再添加新数据。
						dataList.value = list; // 添加新数据。
					} else {
						dataList.value = [...dataList.value, ...list];
					}
					loading.value = false;
				});
			}
			const goOrderInfo = (item : any) => {
				router.push({ url: '/collaborative/query-info/query-info', params: { id: item.id } });
			}
			onShow(() => {
				formData.page = 1; // 重置页码为1，确保每次进入页面都从第一页开始请求数据。
				isMore.value = false;
				getData(); // 页面显示时获取数据
			});
			return {
				theme,
				formData,
				dataList,
				typeColumns,
				recommendColumns,
				openCityPicker,
				cityVisible,
				columnCount,
				confirm,
				cancel,
				getDateDiff,
				goPage,
				scrolltolower,
				loading,
				goOrderInfo,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.wot-theme-light {
		width: 100%;
		height: 100%;
	}

	:deep(.popup-box) {
		.popup-box {
			bottom: -375px; // 设置弹框的初始位置，使其隐藏在屏幕外
		}
	}

	.container {
		padding: 24rpx;
		height: calc(100% - 24rpx - 24rpx - 24rpx);

		.btns {
			display: flex;
			justify-content: space-between;
			width: 100%;

			:deep(.wd-button) {
				min-width: auto !important;
				max-width: calc((100% - 40rpx) / 3) !important; // 设置按钮的宽度为50%
			}

			.square {
				max-width: calc((100% - 40rpx) / 3) !important; // 设置按钮的宽度为50%
				min-width: auto !important;
				margin: 0;

				.wd-button__text {
					display: flex;
					align-items: center; // 垂直居中
					justify-content: center; // 水平居中
					flex-direction: column; // 子元素垂直排列
				}

				.icon-fabu {
					font-size: 40rpx;
					margin-top: 24rpx;
				}
			}
		}

		.query-box {
			margin-top: 24rpx;

			.wd-search {
				padding: 0;
				background-color: transparent;

				:deep(.wd-search__block) {
					height: 70rpx;
					border-radius: 15rpx !important;
				}
			}
		}

		.reception-square {
			position: relative;
			margin-top: 24rpx;
			width: 100%;
			min-height: 200rpx;
			// height: 90%;
			// max-height: 90%;
			height: 100%;
			max-height: 100%;
			box-shadow: 0rpx 2rpx 42rpx 0rpx rgba(0, 0, 0, 0.06);

			&::before {
				content: ' ';
				position: absolute;
				width: calc(100%);
				height: 8rpx;
				background: #c91c1f;
				border-radius: 60rpx 60rpx 0 0;
			}

			.box {
				position: relative;
				top: 8rpx;
				width: calc(100% - 24rpx - 24rpx);
				height: calc(100% + 8rpx);
				overflow: hidden;
				padding: 0 24rpx 24rpx;
				background-color: #fff;
				border-radius: 0 0 14rpx 14rpx;

				.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 33rpx;
					color: #333333;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					position: relative;

					&::after {
						display: inline-block;
						content: ' ';
						width: 100%;
						height: 1rpx;
						background: #eeeeee;
						position: absolute;
						bottom: 0rpx;
						left: 0rpx;
					}
				}

				.search {

					display: flex;
					align-items: center; // 垂直居中
					justify-content: space-between; // 水平居中
					height: 90rpx; // 设置高度，使子元素垂直居中
					display: none;

					.item {
						font-family: PingFang;
						font-weight: 400;
						font-size: 25rpx;
						color: #333333;

						:deep(.wd-sort-button__left) {
							font-size: 25rpx;
							color: #333333;

							&::after {
								background: #c91c1f !important; // 设置字体大小，覆盖默认值
							}
						}

						:deep(.wd-sort-button__wrapper) {
							font-size: 24rpx !important; // 设置字体大小，覆盖默认值

							.wd-icon {
								color: #333333 !important; // 设置字体大小，覆盖默认值
							}

							.is-active {
								.wd-icon {
									transform: scale(1.1);
								}
							}
						}

						.iconfont {
							color: #333333;
							font-size: 24rpx;
						}
					}

					.item:nth-child(4) {
						text-align: right;
					}
				}

				.content {
					height: calc(100% - 90rpx - 90rpx);

					.scroll-Y {
						height: 100%;
					}

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-between; // 垂直居中

						font-family: PingFang;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						padding: 12rpx 24rpx;

						.col {
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							line-height: 60rpx; // 设置行高，使文字垂直居中

							.number {
								flex: 0 0 280rpx;
							}

							.addr {
								flex: 0 0 160rpx;
							}

							.type,
							.user {
								flex: 0 0 160rpx;
								margin: 0 30rpx;
							}

							.date,
							.price {
								flex: 0 0 auto;
							}

							.price {
								font-family: PingFang;
								font-weight: bold;
								font-size: 25rpx;
								color: #c91c1f;
							}

							.user {
								display: flex;
								align-items: center;
								flex: 0 0 270rpx;

								image {
									width: 40rpx !important; // 设置图片宽度为40rpx
									height: 40rpx !important; // 设置图片宽度为40rpx
									border-radius: 50%;
									overflow: hidden;
								}

								text {
									display: inline-block;
									width: calc(100% - 40rpx - 25rpx);
									font-family: PingFang;
									font-weight: 400;
									font-size: 25rpx;
									color: #000000;
									margin-left: 20rpx;
								}
							}
						}
					}

					.item:nth-child(even) {
						background: rgba(238, 238, 238, 0.6);
						border-radius: 15rpx;
					}
				}
			}
		}
	}
</style>